<template>
    <qly-base-page :title="$t('common.allOrder')" bg-page-color="#fff" padding="2rpx 0">
        <up-gap height="2" bgColor="#f5f5f5"></up-gap>
        
        <!--        今日订单-->
        <tr-guide-card padding="24rpx 24rpx 0" disabled/>
        <up-gap height="2" bgColor="#f5f5f5"></up-gap>
        <view class="search-box">
            <up-search :placeholder="searchPlaceholder" v-model="params.keyword"></up-search>
            <up-tabs :list="tabsList" keyName="name"></up-tabs>
            <view class="check-view" v-if="dataList.length>0">
                <up-checkbox :label="$t('common.selectAll')" used-alone v-model:checked="checkAll"/>
            </view>
        </view>
        
        <!--        订单列表-->
        <order-card v-for="(item,index) in dataList" :key="index" :item="item" :index="index"
                    @submitVouchers="openSubmitVouchers" @viewVoucher="openViewVoucher">
            <template #checkbox>
                <up-checkbox @click.stop used-alone v-model:checked="item.$checked"/>
            </template>
            <template #hotel>
                <up-tag :text="$t('common.hotelPickup')" shape="circle" @tap="openHotelShuttle"></up-tag>
            </template>
        </order-card>
        <up-gap height="2" bgColor="#f5f5f5"></up-gap>
        
        <template #footer>
            <view v-if="checkboxSelect" class="btn-box">
                <up-button type="primary" shape="circle" :text="$t('common.sendEmail')" @tap="sendEmail"></up-button>
                <up-button type="primary" shape="circle" :text="$t('common.signIn')" @tap="signIn"></up-button>
            </view>
            <view v-else class="btn-box">
                <!-- 驶离视频-->
                <up-button type="primary" shape="circle" :text="$t('common.departureVideo')" @tap="chooseVideo"></up-button>
                <!--查看视频-->
                <up-button type="primary" shape="circle" :text="$t('common.viewVideo')"></up-button>
            </view>
        
        </template>
    </qly-base-page>
    
    <!--    酒店接送-->
    <hotel-shuttle ref="hotelShuttleRef"/>
    <!--    上报凭证-->
    <submit-vouchers ref="submitVouchersRef"/>
</template>
<script setup>
import orderCard from './components/orderCard.vue'
import hotelShuttle from './components/hotelShuttle.vue'
import submitVouchers from './components/submitVouchers.vue'

const hotelShuttleRef = ref()
const submitVouchersRef = ref()
const searchPlaceholder = computed(()=>{
    return $t('common.pleaseEnter')+$t('common.orderNumber')+'、'+$t("common.name")
})
const params = ref({
    keyword: ''
})

const tabsList = ref([
    {name: $t('common.all')},
    {name: $t('common.specialAttention')},
    {name: $t('common.notGroup')},
    {name: $t('common.notContacted')},
]);

const dataList = ref([{
    order_no: '2022010100000001',
    $checked: false
}, {
    order_no: '2022010100000001',
    $checked: false
}, {
    order_no: '2022010100000001',
    $checked: false
}, {
    order_no: '2022010100000001',
    $checked: false
}])

// 全选计算属性
const checkAll = computed({
    get() {
        if (dataList.value.length > 0) {
            // 每个元素checked则全选
            return dataList.value.every(item => item.$checked)
        }
    },
    set(value) {
        // 每个元素设置checked
        dataList.value.forEach(item => item.$checked = value)
    }
})

// 是否有选中的数据
const checkboxSelect = computed(() => {
    return dataList.value.some(item => item.$checked)
})

// 查看酒店接送信息
const openHotelShuttle = () => {
    hotelShuttleRef.value.open()
}
// 上报凭证
const openSubmitVouchers = (type, data) => {
    submitVouchersRef.value.open(type, data)
}

// 批量发送邮件
const sendEmail = () => {
    qly.dialog.toast({
        title: '邮件发送成功'
    })
}

// 批量签到
const signIn = () => {
    qly.dialog.toast({
        title: '签到成功'
    })
}

// 上传视频
const chooseVideo = () => {
    uni.chooseVideo({
        sourceType: ['camera', 'album'],
        success: function (res) {
            console.log('res', res)
        }
    });
}
</script>
<style scoped lang="scss">
.search-box {
    position: sticky;
    top: 0;
    padding: 12rpx 24rpx;
    background-color: #fff;
    z-index: 9;
    border-bottom: 2rpx solid #f5f5f5;
}

.btn-box {
    display: flex;
    gap: 24rpx;
    padding: 24rpx 24rpx 0;
    box-sizing: border-box;
}

:deep(.uni-badge) {
    z-index: 1;
}
:deep(.uni-scroll-view-content){
    height: auto;
}
</style>
